<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>婚礼邀请后台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="婚礼邀请后台">
    <meta name="description" content="婚礼邀请后台">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/iview/styles/iview.css}"/>
    <style>
    .home-container {
        width: 600px;
        margin: 0 auto;
        margin-top:100px;
        position: relative;
    }
</style>
</head>
<body>
<div id="app" v-cloak>
    <div class="home-container">
        <template>
            <tabs>
                <tab-pane label="邀请信息"/>
                    <template>
                        <i-form label-colon :rules="invitationRuleValidate"  ref="invitation"  :model="invitation"  :label-width="100">
                            <Form-item label="背景图" prop="cover">
                                <i-input  v-model="invitation.cover"  placeholder="请输入背景图"></i-input>
                            </Form-item>
                            <Form-item label="男方" prop="he">
                                <i-input  v-model="invitation.he"  placeholder="请输入男方姓名"></i-input>
                            </Form-item>
                            <Form-item label="女方" prop="she">
                                <i-input  v-model="invitation.she"  placeholder="请输入女方姓名"></i-input>
                            </Form-item>
                            <Form-item label="日期" prop="date">
                                <i-input  v-model="invitation.date"  placeholder="请输入日期"></i-input>
                            </Form-item>
                            <Form-item label="农历" prop="lunar">
                                <i-input  v-model="invitation.lunar"  placeholder="请输入农历"></i-input>
                            </Form-item>
                            <Form-item label="地址" prop="address">
                                <i-input  v-model="invitation.address"  placeholder="请输入日期"></i-input>
                            </Form-item>
                            <Form-item label="酒店" prop="hotel">
                                <i-input  v-model="invitation.hotel"  placeholder="请输入酒店"></i-input>
                            </Form-item>
                            <Form-item label="音乐" prop="music">
                                <i-input  v-model="invitation.music"  placeholder="请输入音乐"></i-input>
                            </Form-item>
                            <Form-item>
                                <i-button  @click="saveInvitation()" type="primary">提交</i-button>
                                <i-button  @click="getInvitation()" style="margin-left: 8px">取消</i-button>
                            </Form-item>
                        </i-form>
                    </template>
                </tab-pane>
                <tab-pane label="相册"/>
                    <i-form label-colon >
                        <Form-item v-for="index of count" :key="index" label="婚纱">
                            <i-input  v-model="albumList[index-1].image"  style="width: 450px"></i-input>
                            <upload :show-upload-list="false"
                                    :on-success="handleSuccess"
                                    :action="'sys/album/upload?index='+index" style="float:right">
                                <i-button icon="ios-cloud-upload-outline">上传</i-button>
                            </upload>
                        </Form-item>
                        <Form-item>
                            <i-button  @click="saveAlbum()" type="primary">提交</i-button>
                            <i-button  @click="addAlbum()" type="primary">追加</i-button>
                        </Form-item>
                    </i-form>
                </tab-pane>
                <tab-pane label="留言"/>

                </tab-pane>
            </tabs>

        </template>
    </div>
</div>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/vue/vue.min.js}"></script>
<script th:src="@{/iview/iview.min.js}"></script>
<script>
    var vm = new Vue({
        el : '#app',
        data:{
            invitation:{},
            invitationRuleValidate : {
                cover: [
                    { required: true, message: '不能为空', trigger: 'blur'}
                ],
                he: [
                    { required: true, message: '不能为空', trigger: 'blur'}
                ],
                she: [
                    { required: true, message: '不能为空', trigger: 'blur'}
                ],
                date: [
                    { required: true, message: '不能为空', trigger: 'blur'}
                ],
                lunar: [
                    { required: true, message: '不能为空', trigger: 'blur'}
                ],
                address: [
                    { required: true, message: '不能为空', trigger: 'blur'}
                ],
                hotel: [
                    { required: true, message: '不能为空', trigger: 'blur'}
                ],
                music: [
                    { required: true, message: '不能为空', trigger: 'blur'}
                ]
	        },
	        albumList:[{'image':''}],
	        count:1
        },
        methods : {
            getInvitation:function(){
                $.ajax({
                    url:'sys/marry/get',
                    type:"post",
                    dataType:'json',
                    success:function(result){
                        if(result.code==0){
                            vm.invitation = result.msg;
                        }
                    }
                });
            },
            saveInvitation:function(){
                $.ajax({
                    url:'sys/marry/save',
                    type:"post",
                    data:vm.invitation,
                    dataType:'json',
                    success:function(result){
                        alert("保存成功");
                    }
                });
            },
            saveAlbum:function(){
                var param = JSON.stringify(vm.albumList)
                $.ajax({
                    url:'sys/album/save',
                    type:"post",
                    data:param,
                    contentType:'application/json',
                    dataType:'json',
                    success:function(result){
                        alert("保存成功");
                    }
                });
            },
            addAlbum:function(){
               vm.count++;
               vm.albumList.push({"image":""});
            },
            listAlbum:function(){
                $.ajax({
                    url:'sys/album/list',
                    type:"post",
                    dataType:'json',
                    success:function(result){
                        if(result.code==0){
                            vm.albumList = result.msg;
                            vm.count = vm.albumList.length;
                        }
                    }
                });
            },
            handleSuccess:function(response, file, fileList){
                  var _this = vm;
                  if(response.code==0){
                    var index = response.index-1;
                    _this.albumList[index].image = response.image;
                    _this.$forceUpdate()
                  }
            },
        },
        created : function() {
            this.getInvitation();
            this.listAlbum();
        }
    });
</script>
</body>
</html>